<template>
  <div class="play-bar">
    <div class="mask" v-show="showPlaylist"></div>
    <!-- <h1>音乐播放组件 </h1> -->
    <div class="left_h">
      <audio
        :src="`https://music.163.com/song/media/outer/url?id=${music.id}.mp3`"
        :loop="loopStar"
        ref="player"
        @timeupdate="timeUpdate"
        @play="playAudio"
        @pause="pauseAudio"
        autoplay
      ></audio>
      <!-- 头像 -->
      <div class="img_h" @click.stop="isfull = true">
        <img
          :src="music.picUrl || music.song.album.picUrl"
          :style="{ animationPlayState: playState ? 'running' : 'paused' }"
        />
      </div>
      <!-- 文字 -->
      <div class="text_h" @click.stop="isfull = true">
        <span :style="{ animationPlayState: playState ? 'running' : 'paused' }">
          <p>{{ music.name }}</p>
          <em v-for="item in music.song.artists" :key="item.id"
            >-{{ item.name }}</em
          >
        </span>
      </div>
    </div>

    <div class="right_b">
      <!-- 播放/暂停 -->
      <div
        :class="['btn', { btn_stop: playState }, { btn_play: !playState }]"
        @click.stop="changePlay"
      >
        <canvas ref="ranger" width="60" height="60"></canvas>
      </div>

      <div class="cd" @click.stop="showPlaylist = !showPlaylist"></div>
      <transition
        enter-active-class="animate__animated animate__backInLeft"
        leave-active-class="animate__animated animate__backOutLeft"
      >
        <!-- 播放列表 -->
        <ul class="playlist" v-show="showPlaylist">
          <h3>当前播放</h3>
          <li
            :class="{ active: music.id == m.id }"
            v-for="(m, index) in playlist"
            :key="index"
            @click.stop="$emit('play', m)"
          >
            <p>{{ index + 1 }} &nbsp; {{ m.name }}</p>
            <button @click.stop="$emit('clear', m)">&Chi;</button>
          </li>
        </ul>
      </transition>
    </div>
    <!-- 正在播放：{{ music.name }} -->
    <transition
      enter-active-class="animate__animated animate__backInUp"
      leave-active-class="animate__animated animate__backOutDown"
    >
      <music-full-screen
        v-if="isfull"
        @showfull="isfull = false"
        @change="change"
        @changeTime="changeTime"
        @play="$emit('play', $event)"
        @clear="$emit('clear', $event)"
        :music="music"
        :playState="playState"
        :currentTime="currentTime"
        :totalTime="totalTime"
        :playlist="playlist"
      ></music-full-screen>
    </transition>
  </div>
</template>

<script>
//   /song/url?id=33894312 获取音乐接口
import MusicFullScreen from "./MusicFullScreen.vue";
import "animate.css";

export default {
  components: { MusicFullScreen },
  props: {
    music: {
      type: Object,
      default: () => {
        return null;
      },
    },
    playlist: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      isfull: false,
      loopStar: false,
      playState: true,
      currentTime: 0,
      totalTime: 0,
      showPlaylist: false,
    };
  },
  created() {
    if (!this.music.length) {
      this.playState = true;
    }
  },
  methods: {
    changePlay() {
      // console.log(e.target);
      this.playState = !this.playState;
      let player = this.$refs.player;
      // console.dir(player);
      if (this.playState) {
        player.play();
      } else {
        player.pause();
      }
    },
    change(e) {
      // console.log("eeeeeeeeee", e);
      this.playState = e;
      let player = this.$refs.player;
      // console.dir(player);
      if (this.playState) {
        player.play();
      } else {
        player.pause();
      }
    },
    timeUpdate(e) {
      // console.dir(e.target);
      let player = e.target;
      let drawer = this.$refs.ranger.getContext("2d");
      let currentTime = (this.currentTime = player.currentTime); //当前播放的时间
      let totalTime = (this.totalTime = player.duration); //当前音乐总时长
      // console.log("当前播放时间==>", currentTime);
      // console.log("当前音乐总时长==>", totalTime);

      drawer.clearRect(0, 0, 50, 50);
      // 绘制圆形
      drawer.beginPath();
      drawer.lineWidth = 3;
      drawer.strokeStyle = "#555";
      drawer.arc(25, 25, 20, 0, 2 * Math.PI);
      drawer.stroke();
      drawer.closePath();
      // 绘制播放进度圆
      drawer.beginPath();
      drawer.strokeStyle = "#fff";
      // 计算出当前播放弧度，当前播放时间/总时间 * 2Π
      let playRate = (currentTime / totalTime) * (2 * Math.PI);
      drawer.arc(25, 25, 20, 0, playRate);
      drawer.stroke();
      drawer.closePath();
      if (currentTime == totalTime) {
        this.playState = false;
      }
    },
    changeTime(time) {
      this.$refs.player.currentTime = time;
    },
    playAudio() {
      //Audio 的播放事件
      this.playState = true;
    },
    pauseAudio() {
      // Audio 的暂停事件
      this.playState = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.play-bar {
  width: 100%;
  background-color: rgba(132, 127, 127, 0.5);
  position: fixed;
  bottom: 0;
  z-index: 100;
  box-shadow: -3px -1px 1px #ccc;
  display: flex;
  justify-content: space-between;
  max-height: 55px;
  .mask {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    bottom: 56px;
  }

  .left_h {
    height: 55px;
    display: flex;
    position: relative;

    .img_h {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      // border: 1px solid black;
      background-color: #090909;
      position: absolute;
      top: -10px;
      left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: auto;
      img {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        animation: roll 4s linear infinite;
      }
    }

    .text_h {
      margin-left: 80px;
      line-height: 60px;
      width: 180px;
      overflow: hidden;

      span {
        display: flex;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        animation: movename 6s linear infinite;
        animation-direction: alternate;
      }
    }
  }

  .right_b {
    display: flex;
    align-items: center;
    margin-right: 15px;
    .btn {
      display: block;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      margin-right: 30px;
      position: relative;
      // background: url(@/assets/暂停.png) no-repeat;

      position: relative;
      canvas {
        position: absolute;
        top: -13px;
        left: -13px;
      }
    }
    .btn_play {
      background: url(@/assets/播放2.png) center/300px no-repeat;
      background-size: cover;
    }
    .btn_stop {
      background: url(@/assets/暂停.png) center/300px no-repeat;
      background-size: cover;
    }

    .cd {
      width: 26px;
      height: 26px;
      background: url(@/assets/音乐菜单.png) no-repeat;
      background-size: cover;
    }

    .playlist {
      width: 95%;
      max-height: 400px;
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 20px;
      background-color: white;
      padding: 0px 20px 10px 20px;
      z-index: 100;
      overflow-y: auto;
      // animation: movelist 0.5s ease-out;

      .active {
        color: red;
        font-weight: bold;
      }
      h3 {
        position: sticky;
        top: 0;
        background-color: #fff;
        padding: 10px 0px;
      }

      li {
        line-height: 30px;
        display: flex;
        // text-overflow: ellipsis;
        p {
          flex: 1;
        }
        button {
          width: 30px;
          height: 30px;
          outline: none;
          border: none;
          font-size: 16px;
          color: #ccc;
          background-color: #fff;
        }
      }
    }
  }

  @keyframes roll {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes movename {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(100%);
    }
  }

  @keyframes movelist {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(0%);
    }
  }
}
</style>